<template>
  <div class="page-header-index-wide">
    <div class="account-settings-info-main">
      <div class="account-settings-info-left">
        <div v-for="menuitem in modulemenu" :key="menuitem.module" class="module">
          <div class="module-title">{{ menuitem.module }}</div>
          <div v-for="item in menuitem.children" :key="item.key" :class="['module-item',{'activation':selectedpath==item.key}]">
            <router-link :to="{ name: item.name }">
              {{ item.title }}
              <a-icon v-if="selectedpath==item.key" type="caret-right" />
            </router-link>
          </div>
        </div>
      </div>
      <div class="account-settings-info-right">
        <a-card :bordered="false" :body-style="{padding:'0 16px'}">
          <router-view />
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
// import { RouteView } from '@/layouts'
const menu = [
  {
    module: '个性装修',
    children: [
      {
        key: '/shop/ShopPage',
        name: 'ShopPage',
        title: '店铺页面'
      },
      {
        key: '/shop/navigation',
        name: 'ShopNavigation',
        title: '店铺导航'
      }
    ]
  },
  {
    module: '系统页面 ',
    children: [
      {
        key: '/shop/ShopUser',
        name: 'ShopUser',
        title: '用户中心'
      },
      {
        key: '/shop/ShopList',
        name: 'ShopList',
        title: '列表模板'
      },
      {
        key: '/shop/ShopClass',
        name: 'ShopClass',
        title: '分类模板'
      },
      {
        key: '/shop/ShopSearch',
        name: 'ShopSearch',
        title: '搜索页'
      }
    ]
  },
  {
    module: '店铺风格',
    children: [
      {
        key: '/shop/ShopColorSystem',
        name: 'ShopColorSystem',
        title: '店铺色系'
      }
    ]
  }
]
export default {
  components: {
    // RouteView
  },
  data() {
    return {
      // horizontal  inline
      modulemenu: menu,
      mode: 'inline',
      openKeys: [],
      selectedpath: ''
    }
  },
  watch: {
    '$route'(val) {
      this.updateMenu()
    }
  },
  mounted() {
    this.updateMenu()
  },
  methods: {
    updateMenu() {
      const routes = this.$route.matched.concat()
      this.selectedpath = routes.pop().path
    }
  }
}
</script>

<style lang="less" scoped>
.page-header-index-wide{
  width: 100%;
  padding: 16px;
  height: 100%;
}
.account-settings-info-main {
  width: 100%;
  display: flex;
  height: 100%;
  overflow: auto;

  .account-settings-info-left {
    border-right: 1px solid #e8e8e8;
    width: 110px;
    padding-right: 16px;
    flex-shrink: 0;
    .module{
      border-bottom: 1px solid #e3e2e5;
      .module-title{
        padding: 12px 10px;
        font-weight: 700;
        font-size: 12px;
      }
      .module-item{
        padding: 12px 10px;
        font-size: 12px;
        position: relative;
        margin: 2px 0;
        display: block;
        color: #595961;
        line-height: 1.42857143;
        a{
          color: #595961;
        }
      }
    }
    .activation{
      color: #35323b;
      background: #e9eaf0;
      border-radius: 6px;
    }
  }

  .account-settings-info-right {
    flex: 1;
    padding: 0px;
    .account-settings-info-title {
      color: rgba(0,0,0,.85);
      font-size: 20px;
      font-weight: 500;
      line-height: 28px;
      margin-bottom: 12px;
    }
    .account-settings-info-view {
      padding-top: 12px;
    }
  }
}

</style>
